<template>
	<div class="search">
		<div class="search-top">
			<input 
				type="text" 
				name="search" 
				placeholder="请输入赛事" 
				id="search" 
				@keyup.enter='getinfo'
			>
			<button @click='goback'>取消</button>
		</div>
		<div class="search-com">
			<ul v-if='list'>
				<li 
					v-for='item in list'
					@click='goDeatil(item.leagueId,item.name_zh)'>
					<p>{{ item.name_zh }}</p>
					<span class="iconfont">&#xe606;</span>
				</li>
			</ul>
			<div v-else class="noData">暂无数据！</div>
		</div>
	</div>	
</template>
<script>
import axios from 'axios'
import { Toast  } from 'mint-ui'
export default {
	name: 'Search',
	data:function(){
		return {
			list:null,
		}
	},
	methods:{
		goback(){
			this.$router.go(-1);
		},
		goDeatil(id,title){
			this.$router.push('/DataBankDeatil/'+title+'/'+id);
		},
		getinfo(){
			var t = this;
			var value = $.trim($('#search').val());
			if (!value) {
				Toast("关键字不能为空")
				return false;
			}
			axios.get('/api/searchMatch.php?keyword='+decodeURI(value))
				.then(function(res){
					res = res.data
					if (res.status ==0 && res.data) {
						const data = res.data
						if (data.length > 0) {
							t.list = data
						}else{
							Toast("没有数据")
						}
					}else{
						Toast(res.message)
					}
				})
				.catch(function (error) {
				    console.log(error);
				  });
		}
	},
	created() {
	},
	mounted(){
	},
	activated(){
		$('#search').val("");
		this.list = null
	}
};
</script>
<style lang="less" scoped>
  @import '~styles/varibles.less';
  .search-top{
  	position: fixed;
  	top: 0;
  	left: 0;
  	right: 0;
  	padding: .2rem ;
  	background: @greenColor;
  	display: flex;
  	justify-content: space-between;
  	input{
		flex: 8;
		border-radius: 10px;
		outline: none;
		padding:.1rem .2rem;
  	}
  	button{
  		flex: 1;
		background:none;
		border:none;
		color: #fff;
		margin-left: .2rem;
  	}
  }
  .search-com{
  	margin-top: 1.1rem;
  	padding:.2rem;
  	li{
  		background:@bggray;
  		padding:.2rem;
  		border-radius:.1rem;
  		margin-bottom: .2rem;
  		display: flex;
  		justify-content: space-between;
  		p{
  			color: #333;
  		}
  		.iconfont{
  			font-size: 12px;
  			color: #333;
  		}
  		
  	}
  }
</style>